<template>
  <div class="password-login">
    <van-icon name="arrow-left" @click="close" />
    <div class="password-nav">账号密码登录</div>
    <van-form class="password-from" @submit="onSubmit">
      <van-field
        v-model="password"
        type="password"
        name="密码"
        placeholder="输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" color="red"
          >立即登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Password } from '@/api/login'
export default {
  name: 'passwordLogin',
  data () {
    return {
      password: '',
      userInfo: {},
      cookie: ''
    }
  },
  computed: {
    ...mapGetters(['phone'])
  },
  methods: {
    async onSubmit (values) {
      // console.log(this.password)
      // console.log(this.phone)
      this.password = this.$md5(this.password)
      const data = await Password(this.phone, this.password)
      // console.log(data)
      const { profile } = data
      console.log(profile)
      this.cookie = data.cookie
      this.userInfo = profile
      // console.log(profile)
      this.userInfo = profile
      if (data.code === 502) {
        this.$toast('密码错误')
      } else {
        this.$toast.success('登录成功')
        this.$router.push('/')
        this.$store.commit('getuserInfo', this.userInfo)
        this.$store.commit('getcookie', this.cookie)
      }
    },
    close () {
      this.$router.go(-1)
    }
  }
}
</script>
<style scoped lang="less">
.password-login {
  padding: 50px;
  .password-nav {
    display: block;
    font-size: 40px;
    text-align: center;
  }
  .password-from {
    padding-top: 60px;
  }
}
</style>
